<template>
	<view class="place">
		<swiper class="swiper" :indicator-dots="false" :autoplay="true" :interval="5000" :duration="500" indicator-active-color="#ffffff" indicator-color="rgba(255, 255, 255, .6)" >
			<swiper-item  v-for="(item , index) in homeSlide" :key="index"   >
				<navigator class="swiper" :url="`/pages/common/${item.urlimg}`">
					<image :src="item.img"></image>
					<view class="MenuTitle">{{item.title}}</view>
				</navigator>
			</swiper-item>
		</swiper>
		<!-- 分类菜单 -->
		<!-- <view class="place-menu">
			<navigator class="MenuNav"  v-for="(item , index) in placeMenu" :key="index" :url="`/pages/sort/${item.url}`">
				<image :src="item.menuImg" :mode="item.mode"></image>
				<view class="MenuTitle">{{item.title}}</view>
			</navigator>
		</view> -->
		<view class="local">
			<view class="titleBlock"><text class="iconfont  icon-retuijianyinqing"></text>{{ localTitle }}</view>
			<scroll-view class="localScroll" scroll-x="true" scroll-left="0" >
				<navigator class="localBlock" v-for="(item , index) in localList" :key="index" >
					<image :src="item.localImg" :mode="item.mode" class="localImg">
					<view class="localName">
						{{item.cityName}}
						<!-- <text>{{item.EnglishName}}</text> -->
					</view>
				</navigator>
			</scroll-view>
			<view class="titleBlock"><text class="iconfont  icon-retuijianyinqing"></text>{{ delicacyTitle }}</view>
			<scroll-view class="localScroll" scroll-x="true" scroll-left="0" >
				<navigator class="localBlock" v-for="(item , index) in delicacy" :key="index" >
					<image :src="item.localImg" :mode="item.mode" class="localImg">
					<view class="localName">
						{{item.cityName}}
					</view>
				</navigator>
			</scroll-view>
		</view>
		
		<view class="listImg">
			<view class="titleBlock"><text class="iconfont  icon-retuijianyinqing"></text>{{ listTitle }}</view>
			<listBox :listing="listing"></listBox>
		</view>
		
	</view>
</template>

<script>
import listBox from '@/components/list/list.vue'
export default {
	components:{
		listBox
	},
	data() {
		return {
			homeSlide:[],
			localTitle:'热门景点',
			localList:[],
			delicacyTitle:'特色美食',
			delicacy:[],
			listTitle:'最新攻略',
			listing:[],
		}
	},
	 onLoad() {
		 this.swiperData();
		 this.placeData();
		 this.delicacyData();
		 this.listData();
	}, 
	methods: {
		swiperData(){
			   uni.request({
				url:'http://mock-api.com/aKbvjYKx.mock/api/placeSwiper',  
				method: 'get',
				dataType: 'JSON',
				data:{
					text:'uni.request'
				},
				header: {
				    'content-type': 'application/x-www-form-urlencoded'
				}, 
				success: (res) => {
					// 将请求到的数据存放放到homeSlide中
					this.homeSlide = eval(res.data);
				}
			}); 
		},
		placeData(){
			   uni.request({
				url:'http://mock-api.com/aKbvjYKx.mock/api/placeList',
				method: 'get',
				dataType: 'JSON',
				data:{
					text:'uni.request'
				},
				header: {
				    'content-type': 'application/x-www-form-urlencoded'
				},  
				success: (res) => {
					console.log(res.data);
					// 将请求到的数据存放放到dataList中
					this.localList = eval(res.data);
				}
			}); 
		},
		  delicacyData(){
		  	   uni.request({
		  		url:'http://mock-api.com/aKbvjYKx.mock/api/placeList',
		  		method: 'get',
		  		dataType: 'JSON',
		  		data:{
		  			text:'uni.request'
		  		},
		  		header: {
		  		    'content-type': 'application/x-www-form-urlencoded'
		  		},  
		  		success: (res) => {
		  			console.log(res.data);
		  			this.delicacy = eval(res.data);
		  		}
		  	}); 
		  },
		listData(){
			   uni.request({
				url:'http://mock-api.com/aKbvjYKx.mock/api/placeData',
				method: 'get',
				dataType: 'JSON',
				data:{
					text:'uni.request'
				},
				header: {
				    'content-type': 'application/x-www-form-urlencoded'
				},  
				success: (res) => {
					console.log(res.data);
					// 将请求到的数据存放放到dataList中
					this.listing = eval(res.data);
				}
			}); 
		}, 
	
	}
}
</script>

<style lang="scss">
@import "../../icon/iconfont.css";	
.place{
	.swiper{
		width: 100%;
		height: 480rpx;
		position: relative;
		image{
			width: 100%;
		}
		.MenuTitle{
			position: absolute;
			bottom: 0;
			width: 96%;
			background-color: rgba(0, 0, 0, 0.6);
			color: $uni-text-color-inverse;
			font-size: $uni-font-size-rty;
			line-height: 80rpx;
			padding:0 2%;
			letter-spacing: $uni-spacing-row-dm;
		}
		.uni-swiper-dot-active{width: 10px;}
	}
	.local{
		width: 98%;
		padding: 0 0 0 2%;
		.localScroll{
			width: 100%;
			white-space: nowrap;
			.localBlock{
				display:inline-block;
				width: 260rpx;
				height: 300rpx;
				margin-right: 30rpx;
				position: relative;
				image{
					width: 100%;
					height: 100%;
					border-radius: $uni-border-radius-lg;
				}
				.localName{
					position: absolute;
					bottom: 10rpx;
					left: 20rpx;
					width: 100%;
					color: $uni-text-color-inverse;
					font-size: $uni-font-size-thirty;
					letter-spacing: $uni-spacing-row-xm;
					text{
						display: block;
						font-size: $uni-font-size-base;
					}
				}
				&:last-child{
					margin-right:0rpx;
				}
			}
		}
	}
	.listImg{
		width: 96%;
		padding: 0 2%;
	}
	/* padding: 0 2%; 
	.place-menu{
		display: flex;
		margin:30rpx 0;
		}*/
}	
</style>
